<template>
	<view class="body" @click="goPostDetail">
		<view class="top">
			<up-avatar :src="InteractionData.data?.avatar" shape="circle" size="50"> </up-avatar>
			<view class="right">
				<h3>{{InteractionData.data?.user_name}}</h3>
				<view class="time">
					<span>{{datatype}}</span> &emsp;<span>{{InteractionData.data?.created_time}}</span>
				</view>
			</view>
			<view class="post">
				<image :src="InteractionData.data?.postImg" mode="aspectFill" />
			</view>
		</view>
	</view>
</template>

<script lang="ts" name="user" setup>
	import { reactive, defineProps, ref, onMounted } from 'vue'
	// let data = reactive({
	// 	src: 'https://tupian.qqw21.com/article/UploadPic/2020-7/202071322581129212.jpg',
	// 	Username: '名字',
	// 	chat: '赞了这条微博',
	// 	Time: '2024-12-02',
	// 	postImg: 'https://img.touxiangwu.com/uploads/allimg/2022053118/k25ka30uxjp.jpg',
	// })
	let replyTime = ref('')
	let datatype = ref('')
	//从父组件获取信息
	const InteractionData = defineProps({
		data: Object,
	})

	onMounted(() => {
		datachange()


	})
	//提示分类
	function datachange() {
		if (InteractionData.data?.interaction_type == 1) {
			datatype.value = "赞了你的评论"
		} else if (InteractionData.data?.interaction_type == 2) {
			datatype.value = "回复了你的评论"
		} else if (InteractionData.data?.interaction_type == 3) {
			datatype.value = "评论你的帖子"
		} else if (InteractionData.data?.interaction_type == 4) {
			datatype.value = "点赞了你的帖子"
		} else {
			datatype.value = "收藏了你的帖子"
		}
	}


	//跳转详情
	const goPostDetail = function () {
		console.log('！！！！！！！！！！注意这里跳转的页面暂时有问题');
		uni.navigateTo({
			url: `/pages/followerDetail/followerDetail`
		})
	}
</script>

<style lang="scss" scoped>
	.top {
		position: relative;
		padding: 30upx 45upx 30upx 35upx;

		// box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
		.right {
			top: 8upx;
			left: 120upx;
			position: absolute;
			margin-left: 30upx;
			margin-top: 20upx;

			.time {
				width: 400upx;
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap; //文字溢出显示省略号
			}
		}

		.post {
			position: absolute;
			top: 18upx;
			right: 28upx;
			height: 100upx;
			width: 100upx;

			image {
				width: 100%;
				height: auto;
				aspect-ratio: 1 / 1;
				border-radius: 10upx;
			}
		}

	}
</style>